<template>
  <view class="scrool-page">
    <view class="item-header-box">
      <u-search :inputStyle="{	fontFamily: 'PingFang SC'}" :actionStyle="{
			background: '#FFFFFF',
			width: '180rpx',
	        height: '60rpx',
			lineHeight: '60rpx',
			fontFamily: 'PingFang SC',
			borderRadius: '30rpx',
		    alignItems: 'center',
		    textAlign: 'center'
		    }" placeholder="请输入关键字" inputAlign="center" v-model="title" height="70" actionText="查询" @custom="custom">
      </u-search>


    </view>
    <view class="item-list">
      <block v-for="(cooperate, i) in cooperateList" :key="i">
        <view class="item-item" @click="cooperateInfo(cooperate.id)">
          <view class="item-name-date">
            <view class="name">
              {{cooperate.name}}
            </view>
            <view class="date">
              {{cooperate.createTime|dateFormat}}
            </view>
          </view>

          <view class="tags">
            <block v-for="tag in cooperate.tags.split(',')">
              <view class="tag">
                {{tag}}
              </view>
            </block>
          </view>
          <view class="line-box">
            <view class="left">
              项目类型:
            </view>
            <view class="right">
              {{cooperate.type}}
            </view>
          </view>
          <view class="line-box">
            <view class="left">
              数量:
            </view>
            <view class="right">
              {{cooperate.count}}
            </view>
          </view>

          <view class="line-box">
            <view class="left">
              概述:
            </view>
            <view class="right">
              {{cooperate.outline}}
            </view>
          </view>

          <view class="item-address-browses">
            <view class="address">{{cooperate.address}}</view>
            <view class="address">{{cooperate.browses}}人浏览数</view>

          </view>



        </view>

      </block>
      <u-divider v-show="pageNum >= totalPages">没有更多了</u-divider>
    </view>

  </view>
</template>
<script>
  export default {
    data() {
      return {
        cooperateList: [

        ],
        title: '项目合作',
        background: {
          backgroundImage: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
        },

        aas: ['a', 'b', 'c'],
        title: "",
        pageNum: 1,
        pageSize: 20,
        totalPages: 0, //总页数
        total: '', //总条数

      };
    },
    filters: {
      //过滤器 用于格式化时间
      dateFormat: function(value) {
        // var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var year = date.getFullYear();
        // var month = ("0" + (date.getMonth() + 1)).slice(-2);
        // var sdate = ("0" + date.getDate()).slice(-2);
        // var hour = ("0" + date.getHours()).slice(-2);
        // var minute = ("0" + date.getMinutes()).slice(-2);
        // var second = ("0" + date.getSeconds()).slice(-2);
        // // 拼接
        // var result = year + "-" + month + "-" + sdate;
        var result = value.slice(0, 10);
        // 返回
        return result;
      },
    },
    onLoad() {
      this.pageNum = 1;
      this.getWindProjectCooperates(this.title);
    },
    methods: {

      /**
       * 下拉刷新回调函数
       */
      onPullDownRefresh() {
        this.pageNum = 1;
        this.getWindProjectCooperates(this.title);
        setTimeout(function() {
          uni.stopPullDownRefresh();
        }, 500);

      },
      /**
       * 上拉加载更多
       */
      onReachBottom() {
        console.log("上拉加载更多" + this.pageNum + "  " + this.totalPages)
        if (this.pageNum >= this.totalPages) {
          return
        }
        // 加载更多数据
        this.pageNum++;
        this.getWindProjectCooperates(this.title);
      },
      // 

      cooperateInfo(id) {

        uni.navigateTo({
          url: '/subpackage/wind/cooperate/cooperate_detail?id=' + id
        })
      },
      custom(e) {
        this.pageNum = 1;
        this.shareList = {};
        this.getWindProjectCooperates(this.title);
      },
      getWindProjectCooperates(title) {
        this.$u.api.getWindProjectCooperates({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            title: this.title
          })
          .then(res => {

            this.total = res.total;
            this.totalPages = res.totalPages;
            var resultList = res.rows;
            if (this.pageNum == 1) {
              this.cooperateList = resultList;
            } else {
              this.cooperateList = this.cooperateList.concat(resultList);
            }
          });
      }
    }
  }
</script>
<style lang="scss">
  page {
    width: 100%;
    height: 100%;
  }

  .tags {
    display: flex;
    margin-top: 10rpx;

    .tag {
      background: #3BA2FF;
      //opacity: 0.5;
      padding: 5rpx;
      color: #FFFFFF;
      border-radius: 18rpx;
      margin: 1rpx;
      font-size: 24rpx;
      font-family: PingFang SC;


    }

    .tag1 {
      font-size: 24rpx;
      font-family: PingFang SC;


      line-height: 40rpx;
    }
  }

  .item-address-browses {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .address {

      font-size: 24rpx;
      font-family: PingFang SC;

      color: #808080;
      line-height: 40rpx;
    }


  }

  .item-name-date {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .name {

      font-size: 34rpx;
      font-family: PingFang SC;
      color: #1A1A1A;
      line-height: 40rpx;
    }

    .date {

      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 40rpx;
    }
  }

  .touch {
    position: fixed;
    right: 20rpx;
    bottom: 50rpx;
    width: 130rpx;
    height: 130rpx;
    line-height: 130rpx;
    /* 文字垂直居中 */
    text-align: center;
    /* 水平居中 */
    background-color: #3BA2FF;
    border-radius: 50%;
    color: #fff;
    font-size: 30rpx;
  }

  .item-header-box {
    flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
    // height:100rpx; //设置高度为100，如果内容确定为这么高的话

    background-color: #3BA2FF;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .item-list {
    flex-grow: 1; //充满屏幕
    height: 100vh; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
    overflow: auto;
    background-color: #F7F7F7;
  }

  .item-item {
    display: flex;
    margin: 10rpx 15rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    //height: 188rpx;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 10rpx;

    .item-author-browses {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
  }

  .line-box {
    display: flex;
    margin-top: 10rpx;

    .left {

      font-size: 26rpx;
      font-family: PingFang SC;

      color: #999999;
      line-height: 40rpx;
    }

    .right {

      font-size: 24rpx;
      font-family: PingFang SC;
      margin-left: 10rpx;
      color: #333333;
      line-height: 40rpx;
    }

  }
</style>
